.generate(200);

.generate(@n, @i: 0) when (@i =< @n) {

  .pa-@{i} {
    padding: 1px * @i !important;
  }

  .py-@{i} {
    padding-top: 1px * @i !important;
    padding-bottom: 1px * @i !important;
  }

  .pt-@{i} {
    padding-top: 1px * @i !important;
  }

  .pb-@{i} {
    padding-bottom: 1px * @i !important;
  }

  .px-@{i} {
    padding-left: 1px * @i !important;
    padding-right: 1px * @i !important;
  }

  .pr-@{i} {
    padding-right: 1px * @i !important;
  }

  .pl-@{i} {
    padding-left: 1px * @i !important;
  }

  .ma-@{i} {
    margin: 1px * @i !important;
  }

  .m-y-@{i} {
    margin-top: 1px * @i !important;
    margin-bottom: 1px * @i !important;
  }

  .mt-@{i} {
    margin-top: 1px * @i !important;
  }

  .mb-@{i} {
    margin-bottom: 1px * @i !important;
  }

  .m-x-@{i} {
    margin-right: 1px * @i !important;
    margin-left: 1px * @i !important;
  }

  .mr-@{i} {
    margin-right: 1px * @i !important;
  }

  .ml-@{i} {
    margin-left: 1px * @i !important;
  }

  // width
  .w-@{i} {
    width: 1px * @i !important;
  }

  // height
  .h-@{i} {
    height: 1px * @i !important;
  }

  .wh-@{i} {
    width: 1px * @i !important;
    height: 1px * @i !important;
  }

  // font-size
  .fz-@{i} {
    font-size: 1px * @i !important;
  }

  .gap-@{i} {
    gap: 1px * @i !important;
  }

  .generate(@n, (@i + 1));
}